<template>
    <div class="container">
        <h1>提交审核记录</h1>
            <p>任务：
              <el-select v-model="formData.task" style="width: 240px">
                <el-option 
                  v-for="i in tasklist" 
                  :key="i.id" 
                  :label="i.name" 
                  :value="i.id">
                </el-option>
              </el-select>
            </p>
            <p> 用户：
              <el-select v-model="formData.audit_user" style="width: 240px">
                <el-option 
                  v-for="i in userlist" 
                  :key="i.id" 
                  :label="i.name" 
                  :value="i.id">
                </el-option>
              </el-select>
            </p>
            <P>审核状态：
                <el-radio-group v-model="formData.audit_status" class="ml-4">
                    <el-radio label="1" size="large">同意</el-radio>
                    <el-radio label="2" size="large">驳回</el-radio>
                </el-radio-group>
                <!-- <el-select v-model="formData.audit_status" style="width: 240px">
                    <el-option value="1">已通过</el-option>
                    <el-option value="2">未通过</el-option>
                    <el-option value="3">审核中</el-option>
                    <el-option value="4">已撤销</el-option>
                </el-select> -->
            </P>
            <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';

const router = useRouter();

const formData = ref({
    task: '',
    audit_user: '',
    audit_status: ''
});

const submitForm = async () => {
http.post('/audit/', formData.value).then(res=>{
    if(res.data.code==201){
    ElMessage.success('审核成功')
    // router.push('/audit')
    }else{
    ElMessage.error('提交失败')
    }
})
};

let userlist = ref([]);

const getUserList = () => {
    http.get('/adminuser/').then(res => {
    userlist.value = res.data;
    // console.log(userlist.value);
    })
}

let tasklist = ref([]);

const getTaskList = () => {
    http.get('/task/').then(res => {
    tasklist.value = res.data;
    // console.log(tasklist.value);
    })
}

onMounted(() => {
getUserList();
getTaskList();
});
</script>

<style scoped>
.container {
display: flex;
flex-direction: column;
justify-content: center;
vertical-align: middle;
align-items: center;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

button {
    width: 80px;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}


.response {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
}

.success {
    background-color: #dff0d8;
    color: #3c763d;
}

.error {
    background-color: #f2dede;
    color: #a94442;
}
</style>